<template>
  <view :class="[`${prefixCls}-area-container`]">
    <view class="cloumn-0">
      <view v-for="(item, index) in computedColumn0" :key="index" @click="handleActiveIndex('index0', index, item)">
        <view :class="['title', index === cloumnData.index0 ? 'active' : '']">{{ item.name }}</view>
      </view>
    </view>
    <view class="cloumn-1" :class="[computedColumn2 && computedColumn2.length === 0 ? 'max-width' : '']">
      <view v-for="(item, index) in computedColumn1" :key="index" @click="handleActiveIndex('index1', index, item)">
        <view :class="['title', column1Active(item) ? 'active' : '', index === cloumnData.index1 ? 'active' : '']">{{ item.name }}</view>
      </view>
    </view>
    <view class="cloumn-2" v-if="computedColumn2 && computedColumn2.length">
      <view v-for="(item, index) in computedColumn2" :key="index" @click="handleActiveIndex('index2', index, item)">
        <view :class="['title', column2Active(item) ? 'active' : '', index === cloumnData.index2 && index === 0 ? 'active' : '']">
          <view class="text">{{ item.name }}</view>
          <uv-icon v-if="column2Active(item) || (index === cloumnData.index2 && index === 0)" :color="theme" name="checkmark"></uv-icon>
        </view>
      </view>
    </view>
    <view class="fixed-button">
      <view class="reset" @click="reset">重置</view>
      <view class="confirm" @click="handleSubmit">确定</view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'area-group',
  components: {},
  mixins: [],
  props: {
    options: {
      type: Array,
      default: () => {},
    },
    propsValue: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cloumnData: {
        searchTitle: '',
        index0: 0,
        index1: 0,
        index2: '',
        value: [],
      },
      selectData: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
    // 返回第二列的数据，用来和已选中的值做匹配，赋值选中状态
    searchTitle1() {
      const isValue = this.selectData.length !== 0
      const { index0 } = this.cloumnData
      return isValue ? this.computedColumn0[index0].name : ''
    },
    computedColumn0() {
      const { index0 } = this.cloumnData
      return this.options
    },
    computedColumn1() {
      const { index0 } = this.cloumnData
      return this.computedColumn0[index0].children
    },
    computedColumn2() {
      const { index1 = 0 } = this.cloumnData
      if (index1 === '') return
      return this.computedColumn1[index1].children
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {
    if (this.propsValue.propsData) {
      const { propsData, value } = this.propsValue
      const { index0, index1 } = propsData
      this.cloumnData.index0 = index0
      this.cloumnData.index1 = index1
      this.selectData = value
    }
  },
  // 生命周期函数，在组件实例进入页面节点树时执行
  activated() {},
  // 生命周期函数，在组件实例被从页面节点树移除时执行
  deactivated() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    column1Active({ id }, index) {
      const isActive = this.selectData.some((v) => {
        return v?.fieldKey == id
      })
      return isActive
    },
    column2Active({ id }, index) {
      const isActive = this.selectData.some((v) => {
        return v.key.includes(id)
      })
      return isActive
    },
    isChinese(str) {
      // 匹配中文字符的正则表达式
      var reg = /[\u4e00-\u9fa5]/
      return reg.test(str)
    },
    // 对不同列点击事件特殊处理
    handleActiveIndex(key, index, { id, name }) {
      this.cloumnData[key] = index
      if (key == 'index0') {
        this.cloumnData.index1 = ''
        this.selectData = []
        return
      }
      if (key == 'index1') {
        if (name === '不限') {
          this.selectData = []
          return false
        }
        const isHaveKey = this.selectData.some((v) => {
          return v.fieldKey == id
        })
        if (this.cloumnData.index0 == 0 && this.cloumnData.index1 == 0) {
          this.selectData = []
        }
        if (isHaveKey) {
          const arr = this.selectData.filter((v) => v.fieldKey == id)
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].key.length !== 0) {
              // 回显当前已选中
              return false
            }
          }
          this.cloumnData.index1 = ''
          this.selectData = this.selectData.filter((v) => v.fieldKey !== id)
        } else {
          this.selectData.push({
            fieldKey: id,
            key: [],
          })
        }
      } else if (key == 'index2') {
        if (this.cloumnData[key] == 0) {
          // 清空当前列已选中的非不限值
          const { index1 } = this.cloumnData
          const findId = this.computedColumn1[index1].id
          this.selectData.forEach((v) => {
            if (v.fieldKey == findId) {
              v.key = []
            }
          })
          return
        }
        const column1Id = this.computedColumn1[this.cloumnData.index1].id
        this.selectData.forEach((v) => {
          if (v.fieldKey == column1Id) {
            const isHaveId = v.key.includes(id)
            if (isHaveId) {
              v.key.forEach((v1, i1) => {
                if (v1 == id) {
                  v.key.splice(i1, 1)
                }
              })
            } else {
              v.key.push(id)
            }
          }
        })
      }
    },
    reset() {
      this.cloumnData.index0 = 0
      this.cloumnData.index1 = 0
      this.cloumnData.index2 = 0
      this.selectData = []
      this.$emit('emit-data', { value: [], searchTitle: '' })
    },
    handleSubmit() {
      const map = {
        propsData: {
          ...this.cloumnData,
        },
        value: [...this.selectData],
      }
      const isValue = Object.keys(map.value)
      if (isValue.length == 0) {
        this.reset()
        return
      }
      this.$emit('emit-data', { value: map, searchTitle: this.searchTitle1 })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('area-container')} {
  width: 100%;
  height: 100%;
  padding-bottom: 150rpx;
  box-sizing: border-box;
  display: flex;
  .active {
    color: $uv-primary;
    background: white;
  }
  .max-width {
    width: calc(100vw - 192rpx) !important;
    // .title {
    //   text-align: left !important;
    // }
  }
  .cloumn-0 {
    line-height: 38rpx;
    overflow-y: scroll;
    width: 192rpx;
    height: fit-content;
    text-align: center;
    background: #f0f0f0;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    .title {
      padding: 20rpx 0;
    }
  }
  .cloumn-1 {
    line-height: 38rpx;
    overflow-y: scroll;
    width: calc(calc(100vw - 192rpx) / 2);
    background: #f5f5f5;
    .title {
      padding: 20rpx 68rpx 20rpx 32rpx;
      text-align: left;
    }
  }
  .cloumn-2 {
    line-height: 38rpx;
    overflow-y: scroll;
    width: calc(calc(100vw - 192rpx) / 2);
    // background: #f5f5f5;
    background: white;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx 20rpx 32rpx;
      .text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 140rpx;
      }
    }
  }
  .fixed-button {
    border: 2rpx solid #f1f1f1;
    position: absolute;
    padding: 32rpx;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    background: white;
    display: flex;
    justify-content: space-between;
    .reset {
      padding: 22rpx 52rpx;
      background: #f5f5f5;
      border-radius: 40rpx;
      color: #666666;
    }
    .confirm {
      background: $uv-primary;
      color: white;
      border-radius: 40rpx;
      padding: 22rpx 226rpx;
    }
  }
}
</style>
